<template>
	<view class="myPage">
		<view class="container" v-if="info.id">
			<video class="top-img" object-fit="contain" :direction="0" :enable-play-gesture="true" id="myVideo" autoplay loop :controls="false"
				:src="img_baseUrl+info.imgPath"></video>
			<cover-view class="details">
				<cover-view class="details_center">
					<cover-view class="addrees">
						<cover-image class="icon" src="https://ltjtjingquguanli.com/statics/std/static/loc_gray.png"></cover-image>
						<cover-view class="attractions">
							{{info.addr?info.addr:""}}
						</cover-view>
					</cover-view>
					<cover-view class="title">{{ info.title }}</cover-view>
					<!-- <view class="btn_item">
						<view class="btn_left">
							感兴趣的话，留个言吧
						</view>
						<view class="btns" :style="{ paddingBottom: marginTop }">
							<view class="btn_rt">
								<uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" absolute="rightTop"
									size="small" max-num="999">
									<image src="https://ltjtjingquguanli.com/statics/std/static/dzvideo.png">
								</uni-badge>
							</view>
							<view class="btn_rt">
								<uni-badge class="uni-badge-left-margin" :inverted="true" text="1230" type="info" absolute="rightTop"
									size="small" max-num="999">
									<image src="https://ltjtjingquguanli.com/statics/std/static/xxvideo.png">
								</uni-badge>
							</view>
						</view>
					</view> -->
				</cover-view>
			</cover-view>
			
		</view>
	</view>
</template>

<script>
	import commonHeader from '@/components/commonHeader.vue';
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html';
	import {
		requestGet
	} from "@/utils/request";
	export default {
		components: {
			commonHeader,
			mpHtml
		},
		data() {
			return {
				headerClassName: "",
				info: {},
				img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
				// videoContext: null,
			};
		},
		onReady: function(res) {
			// this.videoContext = uni.createVideoContext('myVideo');
			// this.videoContext.requestFullScreen();
		},
		mounted() {},
		onLoad: function(options) {
			console.log(options, 'options~~~~')
			const id = options.id
			if (id) {
				this.id = id
				this._getDetail()
			}
		},
		methods: {
			_getDetail() {
				requestGet(`/applet/notes/${this.id}`, {}, "/baseplatform")
					.then((res) => {
						if (res.code === 200) {
							this.info = res.data || {};
							// this.info.articleText = res.data?.articleText || ""
						}
					})
					.catch((err) => console.log("错误了", err));
			},
			onPageScroll(e) {
				if (e.scrollTop > 100) {
					this.headerClassName = "headerClass";
				} else {
					this.headerClassName = "";
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.myPage {
		height: 100%;
		width: 100%;
		position: relative;

		.container {
			height: 100vh;
			width: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;

			.top-img {
				height: 100vh;
				width: 100%;
			}

			.details {
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);

				.details_center {
					padding: 0 40rpx 80rpx 40rpx;
				}

				.addrees {
					padding: 8rpx 12rpx;
					background-color: rgba(0, 0, 0, 0.4);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: fit-content;

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}

					.attractions {
						font-size: 24rpx;
						color: #FFFFFF;
            padding-right: 16rpx;
					}
				}

				.title {
					display: inline-block;
					font-size: 28rpx;
					font-weight: 400;
					color: #fff;
					line-height: 48rpx;
					margin: 28rpx 0 0rpx;
					white-space: normal;
				}

				.btn_item {
					display: flex;
					justify-content: flex-end;
					margin-top: 32rpx;
					.btn_left{
						width: 396rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						background: rgba(255,255,255,0.3);
						box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(149,157,165,0.2);
						border-radius: 44rpx 44rpx 44rpx 44rpx;
						opacity: 1;
						border: 2rpx solid rgba(255,255,255,0.1);
						font-size: 28rpx;
						color: rgba(255,255,255,0.8);
						margin-right: 10rpx;
					}
				}

				.btns {
					width: 264rpx;
					background: #FFFFFF;
					display: flex;
					justify-content: center;
					box-sizing: border-box;
					padding-left: 32rpx;
					padding-right: 32rpx;
					padding-top: 16rpx;
					border-radius: 45rpx;
					background: rgba(255, 255, 255, 0.3);

					.btn_rt {
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 64rpx;
							height: 64rpx;
						}
					}
				}
			}
		}
	}
</style>